<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { TableInstance } from 'element-plus'
import { ComponentSize } from 'element-plus'
import { useUserStore } from '../../store/user'
import user from '../../api/user'
import { UserList } from '../../utils/trueType'
import utils from '../../utils/utils'
import { useAddUserStore } from '../../store/addUser'
import { useUpdateUserPasswordStore } from '../../store/user/updateUserPassword'
import UpdateUserPasswordDIalog from './updateUserPasswordDIalog.vue'
const updateUserPasswordStore = useUpdateUserPasswordStore()
const addUserStore = useAddUserStore()
const userStore = useUserStore()
const multipleTableRef = ref<TableInstance>()
const background = ref(false)
const disabled = ref(false)
const size = ref<ComponentSize>('default')
const selectable = (row: UserList) => row.id
const handleSelectionChange = (selection: any[]) => {
    userStore.selectedIds = selection.map(item => item.id);
}
async function handleSizeChange() {
    await user.getAllUserList(userStore.pageNum, userStore.pageSize).then(res => {
        userStore.userList = res.data.data
        userStore.total = res.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        userStore.changeLoading()
    })
}
async function handleCurrentChange() {
    await user.getAllUserList(userStore.pageNum, userStore.pageSize).then(res => {
        userStore.userList = res.data.data
        userStore.total = res.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        userStore.changeLoading()
    })
}
async function editUser(id) {
    await user.getEditUser(id).then(res => {
        addUserStore.user = res.data.data
        console.log(addUserStore.user)
        addUserStore.setOpen(true)
    }).catch(err => {
        console.log(err)
    })
}
async function deleteUser(id) {
    await user.deleteUser(id).then(res => {
        if (res.data.code == 200) {
            utils.showMessage('删除成功', 'success', 2000)
        } else {
            utils.showMessage('删除失败', 'error', 2000)
        }
    }).catch(err => {
        console.log(err)
    })
    await user.getAllUserList(userStore.pageNum, userStore.pageSize).then(res => {
        userStore.userList = res.data.data
        userStore.total = res.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        userStore.changeLoading()
    })
}
function UpdateUserPassword(id) {
    updateUserPasswordStore.setOpen(true)
    updateUserPasswordStore.id = id
}
onMounted(async () => {
    await user.getAllUserList(userStore.pageNum, userStore.pageSize).then(res => {
        userStore.userList = res.data.data
        userStore.total = res.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        userStore.changeLoading()
    })
})
</script>
<template>
    <el-table v-loading="userStore.loading" ref="multipleTableRef" :data="userStore.userList" row-key="id"
        style="width: 100%" @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column type="selection" :selectable="selectable" width="55" align="center" header-align="center" />
        <el-table-column property="username" label="用户名" width="120" align="center" header-align="center" />
        <el-table-column property="realName" label="姓名" width="120" align="center" header-align="center" />
        <el-table-column property="positionName" label="职位" width="120" align="center" header-align="center" />
        <el-table-column property="deptName" label="部门" width="140" align="center" header-align="center" />
        <el-table-column property="mobile" label="手机号" width="160" align="center" header-align="center" />
        <el-table-column property="status" label="状态" width="120" align="center" header-align="center">
            <template #default="scope">
                <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
                <el-tag v-else type="danger">停用</el-tag>
            </template>
        </el-table-column>
        <el-table-column sortable property="createdAt" label="创建时间" width="160" align="center" header-align="center">
            <template #default="scope">
                {{ utils.formatDate(scope.row.createdAt) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="auto" align="center" header-align="center">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="editUser(scope.row.id)"><el-icon>
                        <EditPen />
                    </el-icon>修改</el-button>
                <el-button link type="danger" size="small" @click="deleteUser(scope.row.id)"><el-icon>
                        <Delete />
                    </el-icon>删除</el-button>
                <el-button link type="warning" size="small" @click="UpdateUserPassword(scope.row.id)"><el-icon>
                        <Lock />
                    </el-icon>重置密码</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="userStore.pageNum" v-model:page-size="userStore.pageSize"
            :page-sizes="[5, 10, 15, 20]" :size="size" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="userStore.total"
            @update:page-size="handleSizeChange" @update:current-page="handleCurrentChange" />
    </div>
    <UpdateUserPasswordDIalog/>
</template>

<style scoped>
.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 1rem;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    :deep(.el-pagination .el-pagination__sizes) {
        display: none;
    }

    .demo-pagination-block :deep(.el-pagination .el-pagination__jump) {
        display: none;
    }

    .demo-pagination-block {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }
}
</style>
